<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>摩天轮</title>
		<style>
			.content{
				width: 600px;
				height: 600px;
				margin: 0 auto;
				  animation: myfirst 1000s;
			  	animation-iteration-count: 100;  
				position: relative;
			}
			@keyframes myfirst{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(36000deg);
				}
			}
			/*先定位三个图片*/
			img:nth-child(2){
				position: absolute;
				left: 30px;
				top: 30px;
				animation: mysecond 1000s;
			}
			img:nth-child(3){
				position: absolute;
				right: 10px;
				bottom: 220px;
			}
			img:nth-child(4){
				position: absolute;
				left: 30px;
				bottom: 30px;
			}
			@keyframes mysecond{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(-36000deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="content">
			<img src="img/fsw.png" height="600px" width="600px" />
			<img src="img/boy.png" />
			<img src="img/girl.png" />
			<img src="img/shamegirl.png" />
		</div>
	</body>
</html>
